<?php if ($articles) { ?>
<div id="ja-top" class="clearfix">
	<div class="ja-moduletable moduletable_blank  clearfix">
		<div class="ja-box-ct clearfix">		
			<div class="ja-slidewrap ja-articles" id="ja-slide-articles" style="visibility:hidden">				
				<div class="ja-slide-main-wrap">
					<div class="ja-slide-mask"></div>
			    	<div class="ja-slide-main">
			    		<?php foreach ($articles as $article) { ?>
				            <div class="ja-slide-item">
				      			<img src="<?php echo $article['image']; ?>" alt="<?php echo $article['name']; ?>" title="<?php echo $article['name']; ?>" />
			      			</div>
		      			<?php } ?>						
		          </div>
    
       
 <!-- JA SLIDESHOW 3 MARK -->
					<div class="maskDesc">
  						<div class="inner"></div>
    				</div>
  				</div>
  <!-- END JA SLIDESHOW 3 MARK -->
    			<div class="ja-slide-descs">
    				<?php foreach ($articles as $article) { ?>
	       				<div class="ja-slide-desc"> 
	 						<a target="_parent"  href="<?php echo str_replace('&', '&amp;', $article['href']); ?>">
	 							<span><?php echo $article['name_mask']; ?></span>
	             			</a>
	              			<p><?php echo $article['des_mask']; ?></p>
	    						<a target="_parent" class="readon readmore" href="<?php echo str_replace('&', '&amp;', $article['href']); ?>">Readmore</a>
	    				</div>
    				<?php } ?>
  				</div>
    
  <!-- JA SLIDESHOW 3 NAVIAGATION -->
    			<div class="ja-slide-thumbs-wrap ja-vertical_right">
    				<div class="ja-slide-thumbs">
    					<?php foreach ($articles as $article) { ?>
			            <div class="ja-slide-thumb">
			               <div  class="ja-slide-thumb-inner">
         						<img src="<?php echo $article['thumb']; ?>"  align="left"  alt="<?php echo $article['name']; ?>" title="<?php echo $article['name']; ?>" />                                              
             					<h3><?php echo $article['name']; ?></h3><?php echo $article['des']; ?>
                     	   </div>
						</div>
						<?php } ?>      			
    				</div>

    				<div class="ja-slide-thumbs-mask" style=" display:none ">
				    	<div class="ja-slide-thumbs-mask-left">&nbsp;</div>
				        <div class="ja-slide-thumbs-mask-center">&nbsp;</div>
				        <div class="ja-slide-thumbs-mask-right">&nbsp;</div>
    				</div>

    				<p class="ja-slide-thumbs-handles">
	              		<span>&nbsp;</span>
	              		<span>&nbsp;</span>
	              		<?php foreach ($articles as $article) { ?>
	              		<span>&nbsp;</span>
	              		<?php } ?>
    				</p>
 <!-- JA SLIDESHOW 3 NAVIAGATION -->        
  				</div>
    <!-- JA SLIDESHOW 3 BUTTONS CONTROL -->    
			</div>

			<script type="text/javascript">
			    new JASlideshow2('ja-slide-articles', {	
		                startItem: 0,
		                showItem: 4,
		                itemWidth: 315,
		                itemHeight: 80,
		                mainWidth: 650,
		                mainHeight: 300,
						maskWidth: 660,
						maskHeigth:100,
		                duration: 300,
		                transition: Fx.Transitions.Quad.easeInOut,
		                animation: 'move',
						animationRepeat: 'true',
		                thumbOpacity:0.8,			
		                maskOpacity: 0.8,
		                buttonOpacity: 0.4,
		                showDesc: 'desc',
		                descMode: 'load',
		                readmoretext: 'Xem thêm',
		                overlap: 0,
		                navigation:'thumbs',
						autoPlay: 0,
						interval: 5000,
						showbtncontrol:1,
						maskAlignment:'bottom',
						languageDirection:( typeof JA_LANGUAGE_DIRECTION == 'string') ? JA_LANGUAGE_DIRECTION : '',
						maskerTransStyle:'style',
						maskerTrans:Fx.Transitions.linear,
						navePos:'vertical_right'
			     });
				/* fix navigator on ie 6,7*/
					 $E('.ja-articles .ja-slide-thumbs-handles').setStyles( {'opacity':'0.001', 'background':'#FFF'} );
			</script>	
		</div>
    </div>	
</div>
<?php } ?>